Table
Table Heading
| Column 1 | Column 2 | Column 3 | |
|---|---|---|---|
| Data Row 1 | Lorem Ipsum | Lorem Ipsum | Lorem Ipsum |
| Data Row 2 | Lorem Ipsum | Lorem Ipsum | Lorem Ipsum |
| Data Row 3 | Lorem Ipsum | Lorem Ipsum | Lorem Ipsum |
HTML
<div class="table-wrap">
<h2 class="h2">Table Heading</h2>
<div class="table--responsive">
<table class="table ">
<thead>
<tr>
<th></th>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody>
<tr>
<th>Data Row 1</th>
<td>Lorem Ipsum</td>
<td>Lorem Ipsum</td>
<td>Lorem Ipsum</td>
</tr>
<tr>
<th>Data Row 2</th>
<td>Lorem Ipsum</td>
<td>Lorem Ipsum</td>
<td>Lorem Ipsum</td>
</tr>
<tr>
<th>Data Row 3</th>
<td>Lorem Ipsum</td>
<td>Lorem Ipsum</td>
<td>Lorem Ipsum</td>
</tr>
</tbody>
</table>
</div>
</div>Notes
The default table style. If it's used outside of a <div class="rtf">, it must have the "table" class applied
Templates this appears on:
Table - Bordered
Table Heading
| Column 1 | Column 2 | Column 3 | |
|---|---|---|---|
| Data Row 1 | Lorem Ipsum | Lorem Ipsum | Lorem Ipsum |
| Data Row 2 | Lorem Ipsum | Lorem Ipsum | Lorem Ipsum |
| Data Row 3 | Lorem Ipsum | Lorem Ipsum | Lorem Ipsum |
HTML
<div class="table-wrap">
<h2 class="h2">Table Heading</h2>
<div class="table--responsive">
<table class="table table--bordered">
<thead>
<tr>
<th></th>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody>
<tr>
<th>Data Row 1</th>
<td>Lorem Ipsum</td>
<td>Lorem Ipsum</td>
<td>Lorem Ipsum</td>
</tr>
<tr>
<th>Data Row 2</th>
<td>Lorem Ipsum</td>
<td>Lorem Ipsum</td>
<td>Lorem Ipsum</td>
</tr>
<tr>
<th>Data Row 3</th>
<td>Lorem Ipsum</td>
<td>Lorem Ipsum</td>
<td>Lorem Ipsum</td>
</tr>
</tbody>
</table>
</div>
</div>Notes
Add borders all around the table and between all the columns.
Templates this appears on:
Table - Condensed
Table Heading
| Column 1 | Column 2 | Column 3 | |
|---|---|---|---|
| Data Row 1 | Lorem Ipsum | Lorem Ipsum | Lorem Ipsum |
| Data Row 2 | Lorem Ipsum | Lorem Ipsum | Lorem Ipsum |
| Data Row 3 | Lorem Ipsum | Lorem Ipsum | Lorem Ipsum |
HTML
<div class="table-wrap">
<h2 class="h2">Table Heading</h2>
<div class="table--responsive">
<table class="table table--condensed">
<thead>
<tr>
<th></th>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody>
<tr>
<th>Data Row 1</th>
<td>Lorem Ipsum</td>
<td>Lorem Ipsum</td>
<td>Lorem Ipsum</td>
</tr>
<tr>
<th>Data Row 2</th>
<td>Lorem Ipsum</td>
<td>Lorem Ipsum</td>
<td>Lorem Ipsum</td>
</tr>
<tr>
<th>Data Row 3</th>
<td>Lorem Ipsum</td>
<td>Lorem Ipsum</td>
<td>Lorem Ipsum</td>
</tr>
</tbody>
</table>
</div>
</div>Notes
Condensed table w/ half padding
Templates this appears on:
Table - Striped
Table Heading
| Column 1 | Column 2 | Column 3 | |
|---|---|---|---|
| Data Row 1 | Lorem Ipsum | Lorem Ipsum | Lorem Ipsum |
| Data Row 2 | Lorem Ipsum | Lorem Ipsum | Lorem Ipsum |
| Data Row 3 | Lorem Ipsum | Lorem Ipsum | Lorem Ipsum |
HTML
<div class="table-wrap">
<h2 class="h2">Table Heading</h2>
<div class="table--responsive">
<table class="table table--striped">
<thead>
<tr>
<th></th>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody>
<tr>
<th>Data Row 1</th>
<td>Lorem Ipsum</td>
<td>Lorem Ipsum</td>
<td>Lorem Ipsum</td>
</tr>
<tr>
<th>Data Row 2</th>
<td>Lorem Ipsum</td>
<td>Lorem Ipsum</td>
<td>Lorem Ipsum</td>
</tr>
<tr>
<th>Data Row 3</th>
<td>Lorem Ipsum</td>
<td>Lorem Ipsum</td>
<td>Lorem Ipsum</td>
</tr>
</tbody>
</table>
</div>
</div>Notes
Adds zebra striping to the tables
Templates this appears on:
Table w/Hover
Table Heading
| Column 1 | Column 2 | Column 3 | |
|---|---|---|---|
| Data Row 1 | Lorem Ipsum | Lorem Ipsum | Lorem Ipsum |
| Data Row 2 | Lorem Ipsum | Lorem Ipsum | Lorem Ipsum |
| Data Row 3 | Lorem Ipsum | Lorem Ipsum | Lorem Ipsum |
HTML
<div class="table-wrap">
<h2 class="h2">Table Heading</h2>
<div class="table--responsive">
<table class="table table--hover">
<thead>
<tr>
<th></th>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody>
<tr>
<th>Data Row 1</th>
<td>Lorem Ipsum</td>
<td>Lorem Ipsum</td>
<td>Lorem Ipsum</td>
</tr>
<tr>
<th>Data Row 2</th>
<td>Lorem Ipsum</td>
<td>Lorem Ipsum</td>
<td>Lorem Ipsum</td>
</tr>
<tr>
<th>Data Row 3</th>
<td>Lorem Ipsum</td>
<td>Lorem Ipsum</td>
<td>Lorem Ipsum</td>
</tr>
</tbody>
</table>
</div>
</div>Notes
Adds hover styles
Templates this appears on: